<template>
  <div class="skus">
    <div class="flx mb15">
      <div class="mr20">
        <img :src="skuImg" class="w110 h110" alt="">
      </div>
      <div>
        <p class="fwb fz16 mb5">{{proDetail.title}}</p>
        <p class="clr2 fz16 mb10">￥{{skuPrice}}</p>
        <p class="clr7 fz12">已选择 "{{checkedColor}}" "{{checkedSize}}"</p>
      </div>
    </div>
    <div class="mb15" v-if="filterColor.length">
      颜色：
      <div class="buttons flx flx-w-w mt5">
        <vtButton
          v-for="(i,n) in filterColor"
          :key="n"
          @click.native="disable(i) ? '' : checkColor(i)"
          :type="i===checkedColor?'type1-plain':''"
          class="mb10 mr15"
          :class="disable(i) ? 'type8' : 'type11'"
        >
          {{ i }}
        </vtButton>
      </div>
    </div>
    <div class="mb15" v-if="filterSize.length">
      尺寸：
      <div class="buttons flx flx-w-w mt5">
        <vtButton
          v-for="(i,n) in filterSize"
          :key="n"
          @click.native="disable(i) ? '' : checkSize(i)"
          :type="i===checkedSize?'type1-plain':''"
          class="mb10 mr15"
          :class="disable(i) ? 'type8' : 'type11'"
        >
          {{ i }}
        </vtButton>
      </div>
    </div>
    <div class="flx-bm">
      <span>数量：</span>
      <AMbutton :count="count" @click-minus="clickMinus" @click-add="clickAdd" />
    </div>
  </div>
</template>

<script>
  import {myTools} from "../../../../jsTools/jsTools"
  import vtButton from 'assets/myTools/vueTools/com/common/button/button'
  import AMbutton from 'assets/myTools/vueTools/com/common/cart2/add-min-button/add-min-button'
  export default {
    components: {
      vtButton,
      AMbutton
    },
    props: {
      proDetail: {
        type: Object,
        default(){
          return {}
        }
      },
      skus: {
        type: Array,
        default(){
          return []
        }
      }
    },
    data() {
      return {
        filterColor: [],
        filterSize: [],
        canBuy:[],
        checkedColor: '',
        checkedSize: '',
        count: 1,
        sku_id: '',
        tst: {}
      }
    },
    computed: {
      path(){
        let path
        if(!this.checkedColor && !this.checkedSize){
          path = ''
        }else if(!this.checkedColor){
          path = this.checkedSize
        }else if(!this.checkedSize){
          path = this.checkedColor
        }else{
          path = this.checkedColor + '-' + this.checkedSize
        }
        return path
      },
      skuImg() {
        let sku, img
        sku = this.tst[this.path]
        if (sku.skus.length === 1) {
          this.skus.forEach(i=>{
            if(i.id === sku.skus[0]) {
              img = i.image
            }
          })
        } else {
          img = this.skus[0].image
        }

        return img
      },
      skuPrice() {
        let sku, price
        sku = this.tst[this.path]

        if (sku.skus.length === 1) {
          this.skus.forEach(i=>{
            if(i.id === sku.skus[0]) {
              price = i.price
            }
          })
        } else {
          let priArr, min, max
          priArr = []
          this.skus.forEach(i=>{
            priArr.push(i.price)
          })
          min = Math.min.apply(null, priArr)
          max = Math.max.apply(null, priArr)

          price = myTools.checkFloat(min,2) + ' - ' + myTools.checkFloat(max,2)
        }

        return price
      }
    },
    created() {
      this.filterSize = this.groupSize(this.skus)
      this.filterColor = this.groupColor(this.skus)
      this.canBuy = this.avaliableSku(this.skus)
      console.log(this.proDetail)
      this.canBuy.forEach(i=>{
        let arr = myTools.powerset(i.arr)
        arr.forEach(j=>{
          let item = this.tst[j.join("-")]
          if(!item) {
            this.tst[j.join("-")] = {
              skus: [i.skuid]
            }
          } else {
            item.skus.push(i.skuid)
          }
        })
      })
      console.log(this.tst)
    },
    methods: {
      groupSize(list){
        let arr = []
        list.forEach(i=>{
          if (myTools.arrSome(arr, i.size) === false && i.size !== '') {
            arr.push(i.size)
          }
        })
        return arr
      },
      groupColor(list){
        let arr = []
        list.forEach(i=>{
          if (myTools.arrSome(arr,i.color) === false && i.color !== '') {
            arr.push(i.color)
          }
        })
        return arr
      },
      avaliableSku(list){
        let arr = []
        list.forEach(i=>{
          if (i.stock>0){
            arr.push({
              arr: [i.color, i.size],
              skuid: i.id
            })
          }
        })
        return arr
      },
      checkColor(i){
       if(this.checkedColor === i){
          this.checkedColor = ''
       }else{
         this.checkedColor = i
       }
      },
      checkSize(i){
        this.checkedSize = this.checkedSize === i ? '' : i
      },
      clickMinus() {
        if(this.count>1) {
          this.count --
        }
      },
      clickAdd() {
        this.count ++
      },
      defaultDisable(n) {
        return !this.tst[n]
      },
      disable(n){
        if(this.checkedSize === '' && this.checkedColor ===''){
          return this.defaultDisable(n)
        }else if(this.checkedSize === '') {
          let cache = this.filterColor.some(i=>{
            return i===n
          })
          return cache === true ? this.defaultDisable(n) : !this.tst[this.checkedColor + '-' + n]
        }else if(this.checkedColor === '') {
          let cache = this.filterSize.some(i=>{
            return i===n
          })
          return cache === true ? this.defaultDisable(n) : !this.tst[n + '-' + this.checkedSize]
        }else{
          this.defaultDisable(n)
        }
      }
    }
  }
</script>

<style scoped lang="stylus">
@import "./index.styl"
</style>
